<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" media="screen" href="/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" media="screen" href="/css/dataTables.bootstrap.min.css">
    <link rel="stylesheet" type="text/css" media="screen" href="/layui/css/layui.css">
    <script src="/js/libs/jquery-2.1.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/bootstrap-select.min.css">
    <script src="/js/bootstrap/bootstrap.min.js"></script>
    <script src="/js/bootstrap/bootstrap-select.min.js"></script>
    <script src="/js/jq.js"></script>
    <script src="/js/plugin/bootstrapvalidator/bootstrapValidator.min.js"></script>
    <script src="/js/common.js"></script>
    <script src="/layui/layui.js"></script>
    <script src="/js/dict.js"></script>
    <script src="/js/libs/jquery.ztree.all-3.5.min.js"></script>
    <script src="/js/my/ztree-menu.js"></script>
    <script src="/js/my/permission.js"></script>
    <script src="/js/plugin/datatables/jquery.dataTables.min.js"></script>
    <script src="/js/plugin/datatables/dataTables.bootstrap.min.js"></script>
</head>
<body>
<div>
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <div>
            <header style="height: 100%">
                <div align="left">
                    <table style="width: 100%">
                        <tr>
                            <td>
                                <form id="form" class="form-inline" method="post" action=""
                                      enctype="multipart/form-data">
                                    文件名称：<input id="fileName" name="fileName" type="text" class="form-control"
                                                placeholder="文件名称">
                                    <input type="text" style="display: none;">
                                </form>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <button id="searchBt" class="layui-btn layui-btn-sm search">
                                    <i class="layui-icon">&#xe615;</i>搜索
                                </button>
                            </td>
                            <td align="right">
                                <button type="button" class="layui-btn" id="test1">
                                    <i class="layui-icon">&#xe67c;</i>上传文件
                                </button>
                            </td>
                        </tr>
                    </table>
                </div>
            </header>

            <div>
                <div class="widget-body no-padding">
                    <table id="dt-table" class="table table-striped table-bordered table-hover" style="width:100%">
                        <thead>
                        <tr>
                        </tr>
                        <tr>
                            <th>url</th>
                            <th>文件名</th>
                            <th>path</th>
                            <th>contentType</th>
                            <th>修改时间</th>
                            <th>管理</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

<script type="text/javascript">
    var pers = checkPermission();

    var pro = window.location.protocol;
    var host = window.location.host;
    var domain = pro + "//" + host;

    var example;

    function init() {
        example =
            $('#dt-table').DataTable({
                "searching": false,
                "processing": false,
                "serverSide": true,
                "language": {
                    "url": "/js/plugin/datatables/Chinese.lang"
                },
                "ajax": {
                    "url": "/files",
                    "type": "get",
                    "data": function (d) {
                        d.fileName = $("#fileName").val().trim();
                    },
                    "error": function (xhr, textStatus, errorThrown) {
                        var msg = xhr.responseText;
                    }
                },
                "dom": "<'dt-toolbar'r>t<'dt-toolbar-footer'<'col-sm-10 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-10' p v>>",
                "columns": [
                    {
                        "data": "url",
                        "defaultContent": "",
                        "render": function (data, type, row) {
                            var url = row['url'];
                            var type = row['type'];

                            var index = url.lastIndexOf(".");
                            var urls = url.substring(index + 1, url.length);
                            var u = "";
                            if (type == 1) {
                                var src = domain + "/files" + url;
                                u = "<a target='_blank' href='" + src + "'><img width='30' src='" + src + "'/></a>";
                            } else {
                                var src = domain + "/files" + url;
                                if ('xlsx' == urls) {
                                    u = "<a target='_blank' href='" + src + "'><img width='30' src='../../../img/file/excel.png'/></a>";
                                } else if ('pdf' == urls) {
                                    u = "<a target='_blank' href='" + src + "'><img width='30' src='../../../img/file/pdf.png'/></a>";
                                } else if ('docx' == urls) {
                                    u = "<a target='_blank' href='" + src + "'><img width='30' src='../../../img/file/word.png'/></a>";
                                } else {
                                    u = "<a target='_blank' href='" + src + "'><img width='30' src='../../../img/file/txt.png'/></a>";
                                }

                            }
                            return u;
                        }
                    },
                    {"data": "fileName", "defaultContent": ""},
                    {"data": "path", "defaultContent": ""},
                    {"data": "contentType", "defaultContent": ""},
                    {"data": "updateTime", "defaultContent": ""},
                    {
                        "data": "",
                        "defaultContent": "",
                        "orderable": false,
                        "render": function (data, type, row) {
                            var id = row['id'];
                            var down = buttonDownload(id, "sys:file:down", pers);
                            var del = buttonDel(id, "sys:file:del", pers);
                            return down + del;
                        }
                    },
                ],
                "order": [[3, "desc"]]
            });
    }

    function del(id) {
        layer.confirm('确定要删除吗？', {
            btn: ['确定', '取消']
        }, function () {
            $.ajax({
                type: 'delete',
                url: '/files/' + id,
                success: function (data) {
                    example.ajax.reload();
                    layer.msg("删除成功");
                }
            });

            layer.close(1);
        });
    }

    function downFile(id) {
        $('#form').attr('action', '/files/downFile/' + id).submit();
    }


    $("#searchBt").click(function () {
        example.ajax.reload();
    });

    layui.use('upload', function () {
        var upload = layui.upload;
        upload.render({
            elem: '#test1' //绑定元素
            , accept: 'file' //允许上传的文件类型
            , url: '/files' //上传接口
            , done: function (res, index, upload) {
                if (res.code === 0) {
                    layer.msg("上传成功");
                    example.ajax.reload();
                }

            }
        });
    });

    init();
</script>